<template>
  <section class="activity">
    <el-col :span="24" class="action-bar">
			<span class="activity-text">会议状态：</span>
      <el-select v-model="activityState" clearable placeholder="请选择" style="margin:0 20px;">
        <el-option
          v-for="item in activityStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
			<el-button type="primary" size="medium" @click="search">筛选</el-button>
      <el-button type="primary" size="medium" @click="newActivity">发布会议</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="activityList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="55" sortable>
			</el-table-column>
			<el-table-column prop="name" label="会议名称" width="250" sortable>
			</el-table-column>
			<el-table-column prop="username" label="发布者" width="100" sortable>
			</el-table-column>
			
			<el-table-column prop="cost" label="报名费用" width="100" sortable>
			</el-table-column>
			<el-table-column prop="accommodation_cost" label="住宿费用" width="100" sortable>
			</el-table-column>
			
			<el-table-column prop="start_time" label="开始时间" width="160" sortable>
			</el-table-column>
			<el-table-column prop="end_time" label="截止时间" width="160" sortable>
			</el-table-column>
			<el-table-column prop="address_detail" label="会议地点" width="250" sortable>
			</el-table-column>
			<el-table-column prop="signupNum" label="已报名人数" width="120" sortable>
			</el-table-column>
			<el-table-column prop="activity_conduct" label="会议二维码" width="250" sortable>
				<template slot-scope="scope">
					<div>
						<img :src="scope.row.signCodeThumb" alt="" style="width:200px;height:200px">
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="activity_conduct" label="会议状态" width="100" sortable>
				<template slot-scope="scope">
					<div>
						<el-tag type="success" v-show="scope.row.activity_conduct=='进行中'">{{scope.row.activity_conduct}}</el-tag>
						<el-tag type="info" v-show="scope.row.activity_conduct=='已结束'">{{scope.row.activity_conduct}}</el-tag>
						<el-tag type="" v-show="scope.row.activity_conduct=='报名中'">{{scope.row.activity_conduct}}</el-tag>
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="activity_link_url" label="会议链接" width="100" sortable>
				<template slot-scope="scope">
					<div>
						<el-button type="primary"
						v-clipboard:copy="scope.row.activity_link_url"
						v-clipboard:success="onCopy"
						size="mini"
						v-clipboard:error="onError">复制链接</el-button>
					</div>
				</template>
			</el-table-column> -->
			
			<!-- <el-table-column label="签到二维码" width="120" sortable>
				<template slot-scope="scope">
					<div class="prevImgItem">
						<img :src="scope.row.signCodeThumb" style="width:100px;height:100px;object-fit:contain"  @click="prevImg(scope.row.signCodeThumb)"/>
					</div>
						
				</template>
			</el-table-column> -->
			<el-table-column label="操作" width="360">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="editorActivity(scope.row.id)">编辑</el-button>
					<el-button type="primary" size="mini" @click="linkToRegistrationForm(scope.row.id)">查看报名表</el-button>
					<el-button type="danger" class="danger-btn" size="mini" @click="getActivityDelete(scope.row.id)">删除</el-button>
					<el-button type="Success" size="mini" @click="showDetailDialog(scope.row.id)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination 
					background 
					layout="prev, pager, next" 
					:total="total"
					:page-size="pagesize"
					@current-change="currentChange"
				>
				</el-pagination>
			</div>
    </el-col>

		<!-- 新增 -->
		<el-dialog :title="dialogTit" :visible.sync="addFormVisible" @close="initAddform" width="70%" :close-on-click-modal="false">
			<el-form  label-width="110px" label-position="left">
				<el-form-item label="会议名称" prop="activityName">
					<el-input v-model="addForm.activityName" auto-complete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="报名人数上限" prop="manLimit">
					<el-input v-model="addForm.manLimit" auto-complete="off" type="number" style="width:200px"></el-input>
				</el-form-item>
				<!-- <el-form-item label="是否允许非会员参加" prop="isAllowNotVipJoin" label-width="150px">
					<el-radio-group v-model="addForm.isAllowNotVipJoin">
						<el-radio class="radio" :label="0">不允许</el-radio>
						<el-radio class="radio" :label="1">允许</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item label="上传图片">
					<el-upload
						class="avatar-uploader"
						action="http://51wenyisheng.com/api/upload/image"
						name="photo"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
					>
					<img v-if="addForm.activeLogo" :src="addForm.activeLogo" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="负责人电话">
					<el-input v-model="addForm.phone"  type="number" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item label="报名费用">
					<el-input v-model="addForm.cost" style="width:200px" type="number"></el-input>
				</el-form-item>
				<!-- <el-form-item label="是否提供住宿">
						<el-radio-group v-model="addForm.isHotel">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
				</el-form-item> -->
				<el-form-item label="住宿费用" >
					<el-input v-model="addForm.hotelCost" style="width:200px" type="number"></el-input>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="addForm.startTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="截止时间">
					<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="addForm.endTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="会议地点">
					<el-cascader
							style="width:300px"
							placeholder="选择地址"
							:options="ORIGIN"
							:props="{value:'label'}"
							v-model="addForm.activityAddr"
							class="cascader"
							filterable></el-cascader>
							<el-input v-model="addForm.addressDetail"  placeholder="输入详细地址" style="margin-top:20px;"></el-input>
				</el-form-item>
				<!-- <el-form-item label="是否允许带客人">
					<el-select v-model="addForm.isGuest" placeholder="请选择">
						<el-option
							v-for="item in isGuestOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="每位客人的餐费">
					<el-input v-model="addForm.guestCost" style="width:200px"></el-input>
				</el-form-item> -->
				<!-- <el-form-item label="会员是否免费">
					<el-select v-model="addForm.isFree" placeholder="请选择">
						<el-option
							v-for="item in isFreeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="是否安排座位">
					<el-select v-model="addForm.isSeat" placeholder="请选择">
						<el-option
							v-for="item in isSeatOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
			</el-form>
			<div class="edit_container">
		<editor v-model="addContent" v-if="editorShow"></editor>
    	</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="getActivityInsert" v-if="!editorFlag">提交</el-button>
				<el-button type="primary" @click="getActivityUpdate" v-else>提交</el-button>
			</div>
		</el-dialog>

		
		<!-- 查看详情 -->
    <el-dialog title="查看详情" :visible.sync="detailVisible" width="70%">
						<el-form  label-width="110px" label-position="left">
				<el-form-item label="会议名称" prop="activityName">
					<div>{{addForm.activityName}}</div>
				</el-form-item>
				<el-form-item label="报名人数上限" prop="manLimit">
					<div>{{addForm.manLimit}}</div>
				</el-form-item>
				<!-- <el-form-item label="是否允许非会员参加" prop="isAllowNotVipJoin" label-width="150px" v-if="addForm.isAllowNotVipJoin">
					<div v-if="addForm.isAllowNotVipJoin==0">不允许</div>
					<div v-if="addForm.isAllowNotVipJoin==1">允许</div>
				</el-form-item> -->
				<el-form-item label="封面图片">
					<img v-if="addForm.activeLogo" :src="addForm.activeLogo" class="avatar">
				</el-form-item>
				<el-form-item label="负责人电话">
					<div>{{addForm.phone}}</div>
				</el-form-item>
				<el-form-item label="报名费用">
					<div>{{addForm.cost}}</div>
				</el-form-item>
				<el-form-item label="住宿费用">
					<div>{{addForm.hotelCost}}</div>
				</el-form-item>
				
				<el-form-item label="开始时间">
					<div>{{addForm.startTime}}</div>
				</el-form-item>
				<el-form-item label="截止时间">
					<div>{{addForm.endTime}}</div>
				</el-form-item>
				<el-form-item label="会议地点">
					<div>{{addForm.activityAddr[0]}}{{addForm.activityAddr[1]}}{{addForm.activityAddr[2]}}{{addForm.addressDetail}}</div>
				</el-form-item>
				<!-- <el-form-item label="是否允许带客人" v-if="addForm.isGuest">
					<div v-if="addForm.isGuest==0">不允许</div>
					<div v-if="addForm.isGuest==1">允许</div>
				</el-form-item> -->
				<!-- <el-form-item label="每位客人的餐费">
					<div>{{addForm.guestCost}}</div>
				</el-form-item> -->
				<!-- <el-form-item label="会员是否免费" >
					<div v-if="addForm.isFree==1">是</div>
					<div v-if="addForm.isFree==0">否</div>
				</el-form-item> -->
				<!-- <el-form-item label="是否安排座位" >
					<div v-if="addForm.isSeat==1">是</div>
					<div v-if="addForm.isSeat==0">否</div>
				</el-form-item> -->
				
				<el-form-item label="会议详情">
					<div v-html="addContent" class="detail"></div>
				</el-form-item>
			</el-form>
			<div class="edit_container">
    	</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="detailVisible = false">确定</el-button>
			</div>
		</el-dialog>

		<!-- 图片预览 -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-wdith:100%" :src="dialogImageUrl" alt="">
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="downloadQrcode(dialogImageUrl)">下载二维码</el-button>
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </section>
</template>

<script>
import ORIGIN from '../../assets/json/origin.json';
import editor from '@/components/editor'
export default {
	data(){
		return {
			prevImgVisible:false,//图片预览的显示
			dialogImageUrl:'',//预览的图片地址
			ORIGIN,
			editorFlag:'',//区分编辑还是新增
			dialogTit:'',
			activityList:[],
			page: 1,
			pagesize: 10,
			total: 0,
			addContent: '',
			editorContent: '',
			editorShow:true,
			addFormVisible: false,//新增界面是否显示
			detailVisible: false,//详情是否显示
			//新增界面数据
			addForm: {
				isHotel:0,//是否提供住宿
				hotelCost:'',
				activityName: '',
				isAllowNotVipJoin:'',//是否允许非会员参加
				manLimit:'',//人数限制
				activeLogo:'',//logo图片地址
				activeLogoId:'',//图片id
				phone:'',//负责人电话
				cost: '',
				startTime: '',
				endTime: '',
				activityAddr:'',
				addressDetail:'',
				isGuest: '',
				guestCost:'',
				isFree:'',
				isSeat:'',
				// integral_rule_id: ''//积分选项
			},
			isGuestOptions:[{	value: 1,label: '允许'},{value: 0,label: '不允许'}],
			isFreeOptions:[{value: 1,label: '是'},{value: 0,label: '否'}],
			isActivityStateOptions:[{value: '报名中',label: '报名中'},{value: '进行中',label: '进行中'},{value: '已结束',label: '已结束'}],
			isSeatOptions:[{value: 1,label: '是'},{value: 0,label: '否'}],
			activityStatus:[{value: '',label: '全部'},{value: 0,label: '报名中'},{value: 1,label: '进行中'},{value: 2,label: '已结束'}],
			activityState: '',
			activityId:'',//会议id
			integralRuleList: [],//积分选项

		}
	},
	mounted(){
		this.getActivityList();
		// this.getIntegralRuleList();
	},
	components:{
		editor
	},
	methods:{
		onCopy(e){
			this.$message({
				type:'success',
				message:'复制成功'
			})
		},
		onError(erro){
			this.$message({
				type:'error',
				message:'复制失败'
			})
		},
		downloadIamge(imgsrc, name) {//下载图片地址和图片名
			var image = new Image();
			// 解决跨域 Canvas 污染问题
			image.setAttribute("crossOrigin", "anonymous");
			image.onload = function() {
				var canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				var context = canvas.getContext("2d");
				context.drawImage(image, 0, 0, image.width, image.height);
				var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			
				var a = document.createElement("a"); // 生成一个a元素
				var event = new MouseEvent("click"); // 创建一个单击事件
				a.download = name || "photo"; // 设置图片名称
				a.href = url; // 将生成的URL设置为a.href属性
				a.dispatchEvent(event); // 触发a的单击事件
			};
			image.src = imgsrc;
			},
		downloadQrcode(url){
			this.downloadIamge(url,'pic')
		},
		editorActivity(id){
			//编辑活动
			this.activityId=id;
			
			this.addFormVisible=true;
			this.getActivityDetail();
			this.editorFlag=true;
			this.dialogTit='编辑活动';
		},
		showDetailDialog(id){
			//查看详情
			this.activityId=id;
			this.getActivityDetail();
			this.detailVisible=true;
		},
		newActivity(){
			//发布活动
			
			this.editorFlag=false;
			this.dialogTit="新增活动";
			this.addFormVisible=true;
		},
		handleAvatarSuccess(res, file) {
			//上传照片成功
			if(res.data){
				this.addForm.activeLogo=res.data.img_url;
				this.addForm.activeLogoId=res.data.id;
				this.$forceUpdate()
			}
		},
		prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
		//分页功能
		currentChange(page){
			this.page = page;
			this.getActivityList();
		},
		//删除活动
		getActivityDelete(id){
			let params = {
				id:id
			}
			//删除
			const judge= this.$confirm('删除该活动?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					let res = await this.$api.getActivityDelete(params)
					if(res.data.level=='success'){
						this.getActivityList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
				}).catch(() => {
          
			});
		},
		//添加活动
		async getActivityInsert(){
			if(!this.addForm.activityAddr){
				this.$message({
					type:'info',
					message:'请填写活动地点'
				})
				return
			}
			let params = {
				accommodation_cost:this.addForm.hotelCost,
				name:this.addForm.activityName,
				isAllowNotVipJoin:this.addForm.isAllowNotVipJoin,
				imgId:this.addForm.activeLogoId,
				rePersonPhone:this.addForm.phone,
				maxJoinNum:this.addForm.manLimit,
				startTime:this.addForm.startTime,
				endTime:this.addForm.endTime,
				province:this.addForm.activityAddr[0],
				city:this.addForm.activityAddr[1],
				area:this.addForm.activityAddr[2],
				addressDetail:this.addForm.addressDetail,
				isSetseat:this.addForm.isSeat,
				isVipfree:this.addForm.isFree,
				detail:this.addContent,
				cost:this.addForm.cost,
				guestCost:this.addForm.guestCost,
				isGuest:this.addForm.isGuest,
				// integral_rule_id:this.addForm.integral_rule_id
			}
			const res = await this.$api.getActivityInsert(params)
			if(res.data.level=='success'){
				this.$message({
						message: res.data.message,
						type: 'success'
				});
				this.getActivityList();
				this.addFormVisible=false;
			}else{
				this.$message({
					message: res.data.message,
					type: 'error'
				});
			}
		},
		//获取活动列表
		async getActivityList(){
			let params = {
				page:this.page,
				pagesize:this.pagesize,
				state:this.activityState
			}
			const res = await this.$api.getActivityList(params)
			if(res.data.level=='success'){
				let list = res.data.data.activity_list;
				list.forEach((item,index)=>{
					if(item.address_detail){
						var str = item.province + item.city + item.area + item.address_detail;
					}else{
						var str = item.province + item.city + item.area;
					}	
					item.address_detail = str;
				})
					this.activityList = list;
					this.total = res.data.data.total;
			}
		},
		search(){
			//筛选
			this.page=1;
			this.getActivityList();
		},
		async getActivityDetail(){
			//获取活动详情
			const res=await this.$api.getActivityDetail({id:this.activityId})
			if(res.data.level=='success'){
				const data=res.data.data.activity_info;
				this.addForm.hotelCost=data.accommodation_cost;
				this.addForm.activityName=data.name;
				this.addForm.isAllowNotVipJoin=+ data.is_allow_not_vip_join;
				this.addForm.activeLogoId=data.img_id;
				this.addForm.activeLogo=data.coverThumb;
				this.addForm.phone=data.re_person_phone;
				this.addForm.manLimit=data.max_join_num;
				this.addForm.startTime=data.start_time;
				this.addForm.endTime=data.end_time;
				this.addForm.activityAddr=[data.province,data.city,data.area];
				this.addForm.addressDetail=data.address_detail;
				this.addForm.isSeat=+data.is_set_seat;
				this.addForm.isFree=+data.is_vip_free;
				this.addContent=data.detail;
				this.addForm.cost=data.cost;
				this.addForm.guestCost=data.guest_cost;
				this.addForm.isGuest=+data.is_guest;
				this.addForm.integral_rule_id=+data.integral_rule_id;

				this.editorShow=false;
				setTimeout(()=>{
					this.editorShow=true;
				},500)
				this.$forceUpdate()
			}
		},
		async getActivityUpdate(){
			//编辑活动
			if(!this.addForm.activityAddr){
				this.$message({
					type:'info',
					message:'请填写活动地点'
				})
				return
			}
			let params = {
				accommodation_cost:this.addForm.hotelCost,
				name:this.addForm.activityName,
				isAllowNotVipJoin:this.addForm.isAllowNotVipJoin,
				imgId:this.addForm.activeLogoId,
				rePersonPhone:this.addForm.phone,
				maxJoinNum:this.addForm.manLimit,
				startTime:this.addForm.startTime,
				endTime:this.addForm.endTime,
				province:this.addForm.activityAddr[0],
				city:this.addForm.activityAddr[1],
				area:this.addForm.activityAddr[2],
				addressDetail:this.addForm.addressDetail,
				isSetseat:this.addForm.isSeat,
				isVipfree:this.addForm.isFree,
				detail:this.addContent,
				cost:this.addForm.cost,
				guestCost:this.addForm.guestCost,
				isGuest:this.addForm.isGuest,
				id:this.activityId,
				// integral_rule_id:this.addForm.integral_rule_id
			}
			const res = await this.$api.getActivityUpdate(params)
			if(res.data.level=='success'){
                    this.$message({
                        message: res.data.message,
                        type: 'success'
						});
						this.getActivityList();
                    	this.addFormVisible=false;
                }else{
                    this.$message({
                    message: res.data.message,
                    type: 'error'
                    });
                }
		},
		//跳转到报名表页面
		linkToRegistrationForm(id){
			this.$router.push({path:'/registrationForm',query:{id}})
		},
		initAddform(){
			//初始化发布弹窗
				this.addForm= {
				activityName: '',
				isAllowNotVipJoin:'',//是否允许非会员参加
				manLimit:'',//人数限制
				activeLogo:'',//logo图片地址
				activeLogoId:'',//图片id
				phone:'',//负责人电话
				cost: '',
				startTime: '',
				endTime: '',
				activityAddr:'',
				addressDetail:'',
				isGuest: '',
				guestCost:'',
				isFree:'',
				isSeat:'',
				isHotel:0,//是否提供住宿
				hotelCost:'',
				// integral_rule_id: ''
			},
				this.addContent=''
				this.editorShow=false;
				setTimeout(()=>{
					this.editorShow=true;
				},500)
		},
		async getIntegralRuleList(){
		let params = {
			type: 'activity'
		}
		//获取积分规则列表
		const res=await this.$api.getIntegralRuleList(params)
		if(res.data.level=='success'){
					var list = res.data.data;
					var newList = [];
					list.forEach((item)=>{
						let obj = {};
						obj.label = item.name;
						obj.value = item.id;
						newList.push(obj);
					})
					this.integralRuleList = newList;
				}
		},
	}
}
</script>
<style lang='scss' scoped>
.prevImgItem :hover{
			cursor: pointer
		}
  .activity{
	  .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
	}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
			.activity-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}

		
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}
	
	.activity .el-dialog__body{overflow: auto;}
	.activity .detail img{
		max-width: 100%;
	}
</style>
